<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .data_title{
            width: 100%;
            padding: 2px;
            font-size: 14px;
            background-color: #09f;
            color: #fff;
        }
        .data_title:hover{
            background-color: rgb(118, 200, 255);
        }
        .datas_css{
            margin-bottom: 10px;
            cursor: pointer;
            display: flex;
            flex-wrap: wrap;
        }
        .datas_css_hive{
            overflow: hidden;
            height: 23px;
        }
        .datas_css:hover{
            background-color: #fff7f7;
        }
        .data_container{
            font-size: 12px;
            box-sizing: border-box;
            padding: 4px;
            margin: 4px;
            border: 1px solid #ccc;
        }
        .gouwuche{
            padding: 2px;
            position: fixed;
            right: 10px;
            bottom: 100px;
            border: 1px solid #ccc;
            background-color: #fff;
            z-index: 3;
            width: 250px;
            height: 200px;
            
        }
        .gouwuche-item{
            overflow: hidden;
            font-size: 13px;
            display: flex;
            justify-content: space-evenly;
        }
        .ipt{
            width: 80px;
        }
        .ipt::-webkit-outer-spin-button,.ipt::-webkit-inner-spin-button {
            -webkit-appearance: none; /* 隐藏 Chrome, Safari, Edge, Opera 上的按钮 */
            margin: 0; /* 移除按钮 */
        }
    </style>
    <script src="./scripts/price.js"></script>
</head>
<body>

    
    <div id="root">
        <div id="data_list"></div>
        <div class="gouwuche">
            <div id="gouwuche_box"></div>
            <div id="all_money"></div>
        </div>


    </div>



    <script>
                
        // 铜币 银币 金币
        // 100铜币=1银币 100银币=1金币
        //
        // 1英镑=20先令=240便士

        let Units = {
            "copper_coin": {
                "name": "铜币",
                "rate": 1
            },
            "silver_coin": {
                "name": "银币",
                "rate": 100
            },
            "gold_coin": {
                "name": "金币",
                "rate": 10000
            },
            "gold_bar": {
                "name": "金条",
                "rate": 500000
            },
            "pound": {
                "name": "英镑",
                "rate": 4800
            },
            "shilling": {
                "name": "先令",
                "rate": 240
            },
            "pence": {
                "name": "便士",
                "rate": 20
            }
        }

        

        function printFormatRet(fr){
            let ret = ""
            for (unit in fr){
                ret += `<div>${fr[unit]}${Units[unit]['name']}</div>`
            }
            return ret
        }
        function formatUnit(value, unit){
            if (Units[unit]){
                let base = value * Units[unit]["rate"]
                let ret = {}
                for( u in Units){
                    ret[u] = base / Units[u]["rate"]
                }
                return ret
            }
        }


        function renderDatas(dataList, key) {
            let el_node = document.createElement("div")
            el_node.classList.add("datas_css")
            el_node.onclick=function (e) {
                if(e && e?.target?.className == "data_title") {
                    el_node.classList.toggle("datas_css_hive")
                }
            }
            el_node.innerHTML = `<div class="data_title">${key}</div>`+dataList.map(item => {
                let ret = formatUnit(item.value, item.unit)
                let ret_s = printFormatRet(ret)
                return `<div data-title="${item.title}" data-price="${ret.copper_coin}" class="data_container" onclick="addToShop(event,'${item.title}','${ret.copper_coin}')">
                    <div>${item.title}</div>    
                    <div>${item.des}</div>
                    <div>${ret_s}</div>    
                </div>`
            }).join("\n")
            document.getElementById("data_list").appendChild(el_node)
        }


        let gouwuche = {}



        function addToShop(e, item, price) {
            if(gouwuche[item]){
                gouwuche[item].count++
            } else {
                gouwuche[item] = {
                    "name": item,
                    "count": 1,
                    "price": price
                }
            }
            
            renderGouWu()
            renderAllPrice()
        }


        function renderGouWu() {
            let gowucheHtml = ""

            for (const key in gouwuche) {
                const gouwu = gouwuche[key]  // name   count   price
                let inputhtml = `<div class="gouwuche-item"><div style="flex-grow:1">${gouwu.name}</div><input class="ipt" onchange="changeprice(event)" type="number" id="${gouwu.name}" name="${gouwu.name}" value="${gouwu.count}" required></div>`
                gowucheHtml += inputhtml
            }


            document.getElementById("gouwuche_box").innerHTML = gowucheHtml

        }

        function renderAllPrice() {
            let all_money = 0
            for (const key in gouwuche) {
                all_money += gouwuche[key].count * gouwuche[key].price
            }
            document.getElementById("all_money").innerHTML = all_money.toFixed(0)
        }
        
        function changeprice(e) {
            if(gouwuche[e.target.name]){
                gouwuche[e.target.name].count = e.target.value - 0
            }
            renderAllPrice()
        }

        for (const key in datas) {
            renderDatas(datas[key],key)
        }

    </script>
</body>
</html>